import Taro from '@tarojs/taro-rn';
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Input, Button, Text, Image } from "@tarojs/components-rn";
import register_step_twoStyleSheet from "./register_step_two_styles";
import eye from '../../assets/img/icon_01.png';
import eye_on from '../../assets/img/icon_01_on.png';
var _styleSheet = register_step_twoStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let RegisterStepTwo = class RegisterStepTwo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentEye: false,
      currentCenterEye: false,
      eyeImg: eye,
      eyeCenterImg: eye,
      focus: 'password',
      password: null,
      passwordCenter: null,
      invitationCode: null,
      isComplete: true,
      passwordType: 'password',
      passwordCenterType: 'password'
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '新用户注册' });
  }
  // input聚焦
  inputFocus(type = 'password') {
    this.setState({
      focus: type
    });
  }
  toggleEye() {
    this.setState({
      currentEye: !this.state.currentEye
    }, () => {
      let eyeImg = this.state.currentEye ? eye_on : eye;
      let passwordType = this.state.currentEye ? 'text' : 'password';
      this.setState({
        eyeImg,
        passwordType
      });
    });
  }
  toggleCenterEye() {
    this.setState({
      currentCenterEye: !this.state.currentCenterEye
    }, () => {
      let eyeCenterImg = this.state.currentCenterEye ? eye_on : eye;
      let passwordCenterType = this.state.currentCenterEye ? 'text' : 'password';
      this.setState({
        eyeCenterImg,
        passwordCenterType
      });
    });
  }
  inputChange(type, e) {
    this.setState({
      [type]: e.target.value
    }, () => {
      let { password, passwordCenter } = this.state;
      if (password && passwordCenter) {
        this.setState({
          isComplete: false
        });
      } else {
        this.setState({
          isComplete: true
        });
      }
    });
  }
  render() {
    let { focus, eyeImg, eyeCenterImg, passwordType, passwordCenterType, isComplete } = this.state;
    return <View style={_styleSheet["login-wrap"]}>
        <View>
          <View style={_getStyle(focus === 'password' ? 'input-group input-group-on' : 'input-group')}>
            <Text style={_styleSheet["input-title"]}>密码</Text>
            <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={passwordType} name="password" onFocus={this.inputFocus.bind(this, 'password')} onChange={this.inputChange.bind(this, 'password')} style={_styleSheet["input"]} />
            <Image src={eyeImg} onClick={this.toggleEye.bind(this)} style={_styleSheet["eye"]} />
          </View>
          <View style={_getStyle(focus === 'passwordCenter' ? 'input-group input-group-on' : 'input-group')}>
            <Text style={_styleSheet["input-title"]}>确认密码</Text>
            <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={passwordCenterType} name="password" onFocus={this.inputFocus.bind(this, 'passwordCenter')} onChange={this.inputChange.bind(this, 'passwordCenter')} style={_styleSheet["input"]} />
            <Image src={eyeCenterImg} onClick={this.toggleCenterEye.bind(this)} style={_styleSheet["eye"]} />
          </View>
          <View style={_getStyle(focus === 'invitationCode' ? 'input-group input-group-on' : 'input-group')}>
            <Text style={_styleSheet["input-title"]}>邀请码</Text>
            <Input placeholderClass="placeholder-class" placeholder="请输入邀请码(选填)" type="text" name="invitationCode" onFocus={this.inputFocus.bind(this, 'invitationCode')} onChange={this.inputChange.bind(this, 'invitationCode')} style={_styleSheet["input"]} />
          </View>

          <Button type="default" disabled={isComplete} style={_getStyle(isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on')}>免费注册</Button>
        </View>

        <View style={_styleSheet["protocol"]}>
          注册即表示同意并阅读
          <Text style={_styleSheet["protocol-text"]}>《建务通服务协议》</Text>
        </View>

      </View>;
  }
};

export default RegisterStepTwo;